﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testppl.aspx.cs" Inherits="WebUI.Form.testppl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title> <style type="text/css">
  	    img{ border:0px; }
		.container { position:relative;font-size:12px;border:0px solid green;padding:0;margin:0;text-align:center;}
		#loading {margin-top:2px;font-size:12px;border-radius:3px;border:1px solid #ccc;text-align:center;line-height:30px;background: #eee;}
		#noshow {margin-top:2px;font-size:12px;border-radius:3px;border:1px solid #ccc;text-align:center;line-height:30px;background: #eee;}
		.pin {width:210px;border:1px solid #ccc;border-radius:3px;list-style:none;position:absolute;text-align:center; }
		.pin div{ margin:5px;display:block;}
		.pin .img{ border:0px solid #eee;}
		.pin .btn {position:absolute;border-radius:3px;background: #eee;line-height:20px;width:60px;border:1px solid #ccc;cursor:pointer; display:none;}
		.pin .title{ background: #eee;line-height:24px;border:1px solid #ccc;}
		.pin .like{ top:8px;left:6px;}
		.pin .comments{ top:8px;right:6px;}
		 .hide {display:none;}

         a:hover
         {  font-style:normal;
             /*#3BAFDA*/
         }
         a:link{
             font-style:normal;
         }
         a:active{
               font-style:normal;
         }
    </style> <script src="../Scripts/jquery-1.7.2.min.js"></script>
        <script src="../Scripts/jquery.pubuliu.js"></script><script type="text/javascript">
                                                                function getQueryStringByName(name) {

                                                                    var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));

                                                                    if (result == null || result.length < 1) {

                                                                        return "";

                                                                    }

                                                                    return result[1];

                                                                }
                                                                    
                        $(document).ready(function () {
                            $(".container").pubuliu({
                                itemSelector: '.pin',
                                loadSelector: '#loading',
                                noSelector: '#noshow',
                                boxTemplate: '<div class="pin hide"><a href="#"><div class="img"><img src="{img}" style="width :198px;height:{height};" alt="" /></div></a><div class="title">{title}</div><div class="like btn">喜欢</div><div class="comments btn">评论</div></div>',
                                columnWidth: 210,
                                marginWidth: 14,
                                marginHeight: 16,
                                ajaxServer: '../Services/waterfall/pubuliu.ashx?action=pubuliu&op=' + getQueryStringByName('op') + "&sort=" + getQueryStringByName('sort')+"&max="+getQueryStringByName("max")+"&min="+getQueryStringByName("min"),
                                //boxParam: 'num',
                                pageParam: 'page',
                                maxPage: 0,
                                init: true,
                                initBoxNumber: 20,
                                scroll: true,
                                scrollBoxNumber: 10,
                                callback: function () {
                                    $(".pin").mouseover(function () {
                                        $(this).find(".btn").show();
                                    }).mouseout(function () {
                                        $(this).find('.btn').hide();
                                    });
                                }
                            });
                        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="container">
    </div>
    <div id="loading">正在加载中……</div>
    <div id="noshow">亲，已经没有了！</div>
    </div>
    </form> 
     
</body>
</html>
